<template>
  <div class="section">
    <el-collapse v-model="searchNames" accordion>
      <el-collapse-item :title="title" name="1">
        <div class="search_box">
          <div class="flex_1 flex_a_center search_top">
            <slot />
          </div>
          <div class="section_btn">
            <slot name="button" />
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '搜索栏（点击隐藏/显示）'
    },
    active: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      searchNames: '1'
    }
  },
  watch: {
    active: {
      handler() {
        this.searchNames = this.active
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
.el-collapse {
  border: none;
  ::v-deep .el-collapse-item__header {
    border: none;
    height: 30px;
    line-height: 30px;
  }
  ::v-deep .el-collapse-item__content {
    border: none;
    padding: 0 0 5px;
  }
  ::v-deep .el-collapse-item__wrap {
    border: none;
  }
  .search_box {
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
  }
  .section_btn {
    ::v-deep .el-button {
      margin: 5px 0 0 10px;
    }
  }
  .search_top {
    ::v-deep > .my-search_input {
      margin-top: 5px;
      // margin-right: 5px;
    }
    ::v-deep > .my-search_select {
      margin-top: 5px;
      // margin-right: 5px;
    }
    ::v-deep & > span,
    ::v-deep & > div {
      margin-top: 5px;
      // margin-right: 5px;
    }
    ::v-deep .label {
      display: inline-block;
      min-width: fit-content;
      text-align: right;
      width: 65px;
    }
  }
}
</style>
